<template>
<!-- vue3组件中的摸版结构可以没有根标签-->
  <h1>一个人的信息</h1>
  <h2>姓名{{person.name}}</h2>
  <h2>年龄{{person.age}}</h2>
  <button @click="changeInfo">修改信息</button>
  <h3>工作类型:{{person.job.type}}</h3>
  <h3>薪资:{{person.job.salary}}</h3>
  <h3>测试{{person.job.a.b.c}}</h3>
  <h3>测试数组爱好:{{person.hobby}}</h3>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // let name = ref('张三')
    // let age = ref(18)
    // let job = reactive({
    //   type:'前端',
    //   salary:'30k',
    //   a:{
    //     b:{
    //       c:666
    //     }
    //   }
    // })
    // let habby = reactive(['游戏','喝酒'])

    let person = reactive({
      name:'张三',
      age:18,
      job:{
        type:'前端工程师',
        salary:'30k',
        a:{
          b:{
            c:666
          }
        }
      },
      hobby:['抽烟','抽烟】']
    })
    // 方法
    function changeInfo(){
      person.name = '李四'
          person.age= 20
      // 用reactive不用 .value
      person.job.type = '后端'
      person.job.salary = '10000k'
      person.job.a.b.c = 400
      person.hobby[0] = '学习'

    }
    return{
      person,
      changeInfo,

    }
  }
}
</script>

<style>

</style>
